import React from "react";
import { EyeFilled } from "@ant-design/icons";
import "../../../../assets/sass/home_page/free_templates/featured_picks/today_recommend/boxc_type_three/boxc_type_three.css";

const BoxcTypeThree = () => {
  const boxTypeThreeLeave = () => {
    const doms = document.querySelectorAll(".boxc_type_three");
    doms.forEach((item) => {
      item.classList.add("boxc_type_three_leave");
    });
  };
  return (
    <div className="boxc_type_three" onMouseLeave={boxTypeThreeLeave}>
      <div className="img_box">
        <img src="/src/assets/image/home_page/main/box_type_three/image.jpg" />
      </div>
      <div className="bottom_bar">
        <div className="text">军事夏令营活动邀请函火热招生</div>
        <div className="user_info">
          <div className="user">
            <div className="avatar">
              <img src="/src/assets/image/home_page/main/box_type_three/userinfo/avatar.gif" />
            </div>
            <div className="username">小夜工作室</div>
          </div>
          <div className="see">
            <EyeFilled className="eye_icon" />
            <span className="see_num">80</span>
          </div>
        </div>
      </div>
      <div className="type">长页</div>
      <div className="suit">
        <img src="/src/assets/image/home_page/main/box_type_three/suit.jpg" />
        <span>套装</span>
      </div>
      <div className="mask">
        <div className="mask_text">查看套装内2个模板</div>
      </div>
    </div>
  );
};

export default BoxcTypeThree;
